<template>
  <a-flex vertical :gap="small">
    <Bubble
      :content="text.repeat(repeat)"
      :typing="{ step: 2, interval: 50 }"
      :avatar="{ icon: userOutlinedIcon }"
    />
    <Bubble
      :content="text.repeat(repeat)"
      :typing="{ step: 2, interval: 50, suffix: '💗' }"
      :avatar="{ icon: userOutlinedIcon }"
    />
    <a-button
      :style="{ alignSelf: 'flex-end' }"
      @click="handleRepeat"
    >
      Repeat {{ repeat }} Times
    </a-button>
  </a-flex>
</template>

<script setup name="BubbleTyping">
import { ref, h } from 'vue'
import { UserOutlined } from '@ant-design/icons-vue'
import { Bubble } from 'ant-design-x-vue'

const text = ref('Ant Design X love you! ')
const repeat = ref(1)
const userOutlinedIcon = h(UserOutlined)

const handleRepeat = () => {
  repeat.value = repeat.value < 5 ? repeat.value + 1 : 1
}
</script>